<template>
  <div class="container bg-gray">
      <xd-datalist ref="datalist" url="/api/user/collections">
        <template slot-scope="scope">
          <router-link class="list-item flex" tag="div" v-for="item in scope.list" :key="item.id" :to="'goodsdetail?id='+item.goodsId">
            <xd-img :src="item.cover|absUrl" alt="" class="goods-img"/>
            <div class="flex-con goods-info">
                <div class="goods-title">
                    {{item.title}}
                </div>
                <div class="goods-desc">
                    <div class="flex">
                        <div class="flex-con flex">
                          <span class="points">{{item.points}}积分</span><span class="money">+{{item.price}}元</span>
                        </div>
                        <div class="do-collect"  @click.stop="cancelCollect(item.goodsId,item.id)">
                            取消收藏
                        </div>                        
                    </div>
                </div>
            </div>
          </router-link>  
        </template>
      </xd-datalist>
  </div>
</template>
<script>
export default {
  methods: {
    cancelCollect(goodsId,id) {
      this.$confirm("确定取消收藏吗？", "提示").then(_ => {
        this.$post("/api/cancelCollectGoods", { goodsId: goodsId }).then(_ => {
          let list = this.$refs.datalist.list;
          list.every((el, index) => {
            if (el.id == id) {
              list.splice(index, 1);
              return false;
            }
            return true;
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list-item {
  padding: 0.32rem 0.4rem;
  background-color: #fff;
  margin-bottom: 0.2rem;
  .goods-img {
    width: 3.3867rem;
    height: 2.1733rem;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .goods-info {
    padding-left: 0.4667rem;
    .goods-title {
      font-size: 0.3467rem;
      line-height: 1.4em;
      padding-bottom: 0.8rem;
    }
  }
  .points {
    font-size: 0.3733rem;
    color: #ff2a2a;
  }
  .money {
    font-size: 0.3733rem;
    color: #01632e;
  }
  .do-collect {
    width: 1.88rem;
    height: 0.6133rem;
    line-height: 0.5867rem;
    font-size: 0.32rem;
    color: #ff8f2f;
    text-align: center;
    border-radius: 6px;
    border: solid 1px #ff8f2f;
  }
}
</style>
